<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>千峰商城</title>

    <script src="./utils/flexible.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/index.js"></script>
    <link
      rel="shortcut icon"
      href="assets/imgs/facicon.ico"
      type="image/x-icon"
    />
  </head>
  <style type="text/css">
    @font-face {
      font-family: "qmt";
      src: url(./assets/font/qmt.ttf);
    }
    body {
      font-family: qmt;
    }
  </style>

  <body>
    <div class="header" id="top">
      <img src="assets/imgs/header_logo.png" alt="" />
      <img src="assets/imgs/header_app.png" alt="" />
    </div>

    <div class="searchbox">
      <input type="text" placeholder="请输入你想比价的产品" />
      <button style="color: white">
        <div style="font-family: qmt">搜索</div>
      </button>
    </div>

    <div class="container">
      <ul></ul>
    </div>

    <div class="discount">
      <span>超值折扣推荐</span>
      <!-- <img src="assets/imgs/" alt=""> -->
    </div>

    <div class="product">
      <ul></ul>
    </div>
    <div class="footer">
      <div class="more">
        <a>更多优惠信息>></a>
      </div>
      <div class="chart">
        <span>品牌排行</span>
      </div>
      <ul>
        <li>登入</li>
        <li>注册</li>
        <li><a href="#top" style="color: black">返回顶部</a></li>
      </ul>
      <p>手机APP下载 万锋智慧商城手机版 -- 掌上比价平台</p>
      <p>chst.vip:8081/crm</p>
    </div>

    <!-- <script>
      let html = "";
      $.ajax({
        url: "http://chst.vip:1234/api/getindexmenu",
      }).then((res) => {
        creatEl(res.result);
        // console.log($("li img"));
        $(".container ul").on("click", "li", clickHandler);
      });

      $.ajax({
        url: "http://chst.vip:1234/api/getmoneyctrl",
      }).then((res) => {
        creatDiscount(res.result);
      });

      $(".footer .more a").click(function () {
        location.href = "./pages/";
      });

      function creatEl(data) {
        data.forEach((item) => {
          img = item.img.replace(/[/"].+?[\/]/, '"./assets/imgs/');
          html += `
                    <li class="${item.titlehref}">
                        
                        ${img}
                        
                        <p>${item.name}</p>
                    </li>
                `;
        });
        $(".container ul").html(html);
      }

      function creatDiscount(data) {
        html = "";
        data.forEach((item) => {
          // console.log(item);
          html += `
                     <li productId="${item.productId}">
                     ${item.productImgSm}
                     <p>${item.productName}</p>
                     <span>${item.productFrom}${item.productTime}</span>
                     <span>${item.productComCount}</span>
                     </li>
                `;
        });
        // console.log(html);
        $(".product ul").html(html);
        $(".product ul").on("click", "li", clickHandler);
      }

      function clickHandler(e) {
        let href =
          $(this).prop("class") == ""
            ? $(this).attr("productId")
            : $(this).prop("class");
        if (href == "#") {
          $(".container ul li:nth-child(n+9)").slideToggle(500);
        } else if (parseInt(href)) {
          location.href = "./pages/indexdetails.html?productid=" + href;
        } else {
          location.href = "./pages/" + href;
        }
      }
    </script> -->
  </body>
</html>
